/**
 * Category
 */
/*
* commonItem 中调用updateState
* */

var React = require("react");
var VideoItem = require("../details/VideoItem");
var PhoneItem = require("../details/PhoneItem");
var SearchItem = require("../details/SearchItem");
var WebsiteItem = require("../details/WebsiteItem");
var AddressItem = require("../details/AddressItem");
var ShoppersItem = require("../details/ShoppersItem");
var CategoryWebItem = require("./CategoryWebItem");
var CategoryPhoneItem = require("./CategoryPhoneItem");
var CategoryVideoItem = require("./CategoryVideoItem");
var CategorySearchItem = require("./CategorySearchItem");
var CategoryAddressItem = require("./CategoryAddressItem");
var CategoryShoppersItem = require("./CategoryShoppersItem");
import {connect} from 'dva';

var Category = React.createClass({
    getInitialProps: function () {
        return {
            details: {}
        }
    },
    componentWillMount: function () {
        this.categoryTypes = ["phone", "website", "address", "search_nearby", "shoppers", "video"];
    },
    getDetail: function (data) {
        var updateState = this.props.updateState,
            type = data.type,
            detail = data.data,
            mappings = {
                search_nearby: <SearchItem type={type} key={type} data={detail} updateState={updateState}/>,
                shoppers: <ShoppersItem type={type} key={type} data={detail} updateState={updateState}/>,
                phone: <PhoneItem type={type} key={type} data={detail} updateState={updateState}/>,
                website: <WebsiteItem type={type} key={type} data={detail} updateState={updateState}/>,
                address: <AddressItem type={type} key={type} data={detail} updateState={updateState}/>,
                video: <VideoItem type={type} key={type} data={detail} updateState={updateState}/>
            };
        return mappings[type] || "";
    },
    rebuildDetail: function (type) {
        var details = this.props.details;
        for (var key in details) {
            if (details.hasOwnProperty(key)) {
                if (key === type) {
                    var detail = {};
                    detail.type = key;
                    detail.data = details[key];

                    return this.getDetail(detail);
                }
            }
        }

        return "";
    },
    rebuildCategory: function (type) {
        var mappings = {
            search_nearby: <CategorySearchItem key={type} type={type} click={this.handleOnAddDetails}/>,
            shoppers: <CategoryShoppersItem key={type} type={type} click={this.handleOnAddDetails}/>,
            phone: <CategoryPhoneItem key={type} type={type} click={this.handleOnAddDetails}/>,
            website: <CategoryWebItem key={type} type={type} click={this.handleOnAddDetails}/>,
            address: <CategoryAddressItem key={type} type={type} click={this.handleOnAddDetails}/>,
            video: <CategoryVideoItem key={type} type={type} click={this.handleOnAddDetails}/>
        };
        return mappings[type] || "";
    },
    handleOnAddDetails: function (type) {
        this.props.updateState("dialog", type);
    },
    hasAddedDetail: function (type) {
        var details = this.props.details;
        for (var key in details) {
            if (key == type) {
                return true;
            }
        }
        return false;
    },
    render: function () {
        let contentNode = [];
        this.categoryTypes.forEach(function (type) {
            var node = this.hasAddedDetail(type) ? this.rebuildDetail(type) : this.rebuildCategory(type);
            contentNode.push(node);
        }.bind(this));

        return (
            <div className="category-content">
                <div className="header">
                    <div className="region">
                        <i></i>
                        <span>添加识别信息</span>
                    </div>
                </div>
                <div className="content">
                    { contentNode }
                </div>
            </div>
        )
    }
});

export default Category;
